<template>
  <el-dialog
    title="添加留言信息"
    v-model="centerDialogVisible"
    width="50%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      :model="lybForm"
      :rules="rules"
      ref="validateForm"
      label-width="100px"
    >
      <el-form-item label="留言标题：" prop="title">
        <el-input v-model="lybForm.title"></el-input>
      </el-form-item>
      <el-form-item label="作者：" prop="author">
        <el-input v-model="lybForm.author"></el-input>
      </el-form-item>
      <el-form-item label="留言内容：" prop="content">
        <QuillEditor theme="snow" ref="editor"></QuillEditor>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <!-- 点击取消按钮后关闭窗口 -->
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import axios from "axios";
// npm install @vueup/vue-quill@beta --save 安装富文本编辑器，在添加留言内容时需要用到
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ElMessage } from "element-plus";
// 对添加留言所有内容做校验
function useAdd(state, validateForm, editor, emit) {
  const submitAdd = () => {
    // 给留言内容赋值，内容中可能有<br />换行符
    // 如果没有匹配到换行符，就用editor.value.getHTML()方法获取内容，如果有匹配到，就替换为空字符串
    state.lybForm.content =
      editor.value.getText().replace(/(\r\n|\n\r)/gm, "<br />") !== "<br />"
        ? editor.value.getText()
        : "";
    validateForm.value.validate(async (valid) => {
      if (!valid) return ElMessage.error("验证未通过");
      // 如果校验通过，保存数据
      const data = {
        title: state.lybForm.title,
        author: state.lybForm.author,
        content: state.lybForm.content,
      };
      // 使用异步请求的方式
      // 注意post请求参数是data，不是params
      await axios({ url: "/lybs/", data, method: "post" });
      validateForm.value.resetFields();
      editor.value.setText("");
      emit("onCloseDialog", false);
    });
  };
  return {
    submitAdd,
  };
}
export default {
  // 组件注册
  components: {
    QuillEditor,
  },
  props: {
    centerDialogVisible: Boolean,
  },
  // 通过emits保存父组件传递过来的事件
  emits: ["onCloseDialog"],
  // 解构emits中的方法{emit}
  setup(props, { emit }) {
    const validateForm = ref();
    const editor = ref();
    const state = reactive({
      // 接受父组件传递的dialog的属性值，初始值为隐藏
      centerDialogVisible: props.centerDialogVisible,
      lybForm: {
        title: "",
        author: "",
        content: "",
      },
    });
    // 通过emits触发事件
    const closeDialog = (visible) => {
      // 接受visible传递过来的值，触发emit事件
      emit("onCloseDialog", visible);
    };
    // 定义校验规则
    const rules = {
      title: [
        { required: true, message: "请输入留言标题", trigger: "blur" },
        {
          min: 2,
          max: 20,
          message: "长度在 2 到 20 个字符",
          trigger: "blur",
        },
      ],
      author: [
        { required: true, message: "请输入留言作者", trigger: "blur" },
        {
          min: 2,
          max: 15,
          message: "长度在 2 到 15 个字符",
          trigger: "blur",
        },
      ],
      content: [{ required: true, message: "请输入留言内容", trigger: "blur" }],
    };
    return {
      ...toRefs(state),
      closeDialog,
      rules,
      ...useAdd(state, validateForm, editor, emit),
      validateForm,
      editor,
    };
  },
};
</script>

<style>
</style>